<template>
    <!-- <div>获取meta内容：{{ $router.options.routes }}</div>
    <div v-for="item in $router.options.routes">
        路由的名称：{{ item.name }}
        路由的组件名称：{{ item.meta.title }}
    </div>
    <p>获取当前执行的路径：{{ $route.fullPath }}</p> -->
<!-- 首先加入 vue 的路由访问链接 -->
<!--<div class="menu">
    <router-link to="/">
        <img src="C:\Users\Junyao\Desktop\24-25下实训\myvueapp\src\assets\head.png" alt="首页" class="menu-image" />
      </router-link>&nbsp;
      <router-link 
            to="/find" 
            :style="{ color: activeLink === 'find' ? '#ff5722' : 'white' }"
            @click="handleLinkClick('find')"
        >发现音乐</router-link> &nbsp;
        <router-link 
            to="/my" 
            :style="{ color: activeLink === 'my' ? '#ff5722' : 'white' }"
            @click="handleLinkClick('my')"
        >我的音乐</router-link> &nbsp;
        <router-link 
            to="/friend" 
            :style="{ color: activeLink === 'friend' ? '#ff5722' : 'white' }"
            @click="handleLinkClick('friend')"
        >我的关注</router-link> &nbsp;
        <router-link 
            to="/musician" 
            :style="{ color: activeLink === 'musician' ? '#ff5722' : 'white' }"
            @click="handleLinkClick('musician')"
        >音乐人</router-link> &nbsp;
         在此处加一个搜索框
        {{ msg }}
        <input type="text" placeholder="我只是一个input" v-model.trim="msg" style="margin-left: auto;">
    </div>
-->
    <!--路由的总出口 必填项  哪个页面是父组件 或父类 就在那个vue里面编写出口-->
    <RouterView></RouterView>
</template>

<script setup>

// import { RouterLink } from 'vue-router';
import { ref } from 'vue';
const msg = ref('')
const activeLink = ref('');

const handleLinkClick = (linkName) => {
    activeLink.value = linkName;
};
</script>

<style  scoped>
a{
    text-decoration: none;
}
.menu{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 水平方向左对齐 */
    background-color: #161515;
    padding: 10px;
    a{
        color: white;
        font-size: 18px;
        font-family: Arial, sans-serif; /* 选择合适字体 */
        font-weight: 500; /* 调整字重 */
        line-height: 1.2; /* 调整行高 */
        margin-left: 20px;
        margin-right: 50px; /* 链接间间距 */
        transition: color 0.3s ease; /* 鼠标悬停动画过渡效果 */
    }&:hover{
        color: #ff5722; /* 鼠标悬停颜色 */
    }
}
.menu-image {
    height: 30px; 
    width: auto; 
    cursor: pointer;
    border-radius: 5px; /* 添加圆角 */
}
.menu-input{
    align-items: center; /* 垂直居中 */
    /* 靠右放置 */
    margin-left: auto;
    /* 圆角输入框 */
    border-radius: 15px;
}
</style>